<template>
	<div class="box">
		<Form :model='data1' ref="tableForm">
			<Table height="600" stripe :columns="columns1" :data="data1"></Table>
		</Form>
		<div class="page">
			<span>共{{data1.length}}条</span>
		</div>
		<div class="footer">
			<Button type="primary" @click="save">保存</Button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				data1: [],
				columns1: [{
						type: 'index',
						title: '序号',
						width: 80,
					},{
						minWidth: 100,
						title: 'Name',
						key: 'name'
					},
					{
						minWidth: 100,
						title: 'Age',
						key: 'age'
					},
					{
						minWidth: 100,
						title: 'Sex',
						key: 'sex'
					},
					{
						minWidth: 150,
						title: 'University',
						key: 'university',
						renderHeader: (h,params) => {
							return this.renderHeader(h,'university')
						},
						render: (h, params) => {
							return h('FormItem',{
								props: {
									prop: `[${params.index}].university`,
									rules: [{ required: true, message: '请输入', trigger: 'blur' }]
								}
							},[
								h('Input',{
									props: {
										value: params.row.university,
									},
									on: {
										'on-blur':(e)=>{
											this.data1[params.index].university = e.target.value
										}
									}
								},
								)
							])
						}
					},
					{
						minWidth: 150,
						title: 'Major',
						key: 'major',
						renderHeader: (h,params) => {
							return this.renderHeader(h,'major')
						},
						render: (h, params) => {
							return h('FormItem',{
								props: {
									prop: `[${params.index}].major`,
									rules: [{ required: true, message: '请输入', trigger: 'blur' }]
								}
							},[
								h('Input',{
									props: {
										value: params.row.major,
									},
									on: {
										'on-blur':(e)=>{
											this.data1[params.index].major = e.target.value
										}
									}
								},
								)
							])
						}
					},
					{
						minWidth: 150,
						title: 'Company',
						key: 'company',
						renderHeader: (h,params) => {
							return this.renderHeader(h,'company')
						},
						render: (h, params) => {
							return h('FormItem',{
								props: {
									prop: `[${params.index}].company`,
									rules: [{ required: true, message: '请输入', trigger: 'blur' }]
								}
							},[
								h('Input',{
									props: {
										value: params.row.company,
									},
									on: {
										'on-blur':(e)=>{
											this.data1[params.index].company = e.target.value
										}
									}
								},
								)
							])
						}
					},
					{
						minWidth: 150,
						title: 'Department',
						key: 'department',
						renderHeader: (h,params) => {
							return this.renderHeader(h,'department')
						},
						render: (h, params) => {
							return h('FormItem',{
								props: {
									prop: `[${params.index}].department`,
									rules: [{ required: true, message: '请输入', trigger: 'blur' }]
								}
							},[
								h('Input',{
									props: {
										value: params.row.department,
									},
									on: {
										'on-blur':(e)=>{
											this.data1[params.index].department = e.target.value
										}
									}
								},
								)
							])
						}
					},
					{
						minWidth: 150,
						title: 'Address',
						key: 'address',
						renderHeader: (h,params) => {
							return this.renderHeader(h,'address')
						},
						render: (h, params) => {
							return h('FormItem',{
								props: {
									prop: `[${params.index}].address`,
									rules: [{ required: true, message: '请输入', trigger: 'blur' }]
								}
							},[
								h('Input',{
									props: {
										value: params.row.address,
									},
									on: {
										'on-blur':(e)=>{
											this.data1[params.index].address = e.target.value
										}
									}
								},
								)
							])
						}
					},
					{
						minWidth: 100,
						title: 'Date',
						key: 'date'
					},
				],
				
			};
		},
		created() {
			
		},
		mounted() {
			this.createData(200)
			var _per=window.performance;
			function getmb(size){
					return Math.floor(size/1024/1024,4)+'mb';
			};
			function getsec(time){
					return time/1000+'s';
			};
			console.log("内存占用："+getmb(_per.memory.usedJSHeapSize));
			console.log("TCP链接耗时："+getsec(_per.timing.connectEnd-_per.timing.connectStart));
			console.log("响应耗时"+getsec(_per.timing.responseEnd-_per.timing.responseStart));
			window.onload=function(){
				console.clear()
				console.log("dom渲染耗时："+getsec(_per.timing.domComplete-_per.timing.domLoading));
			}
		},
		methods: {
			createData(len) {
				const temp = {
					name: 'John Brown',
					age: 18,
					sex: '男',
					university: '北京大学',
					major: '软件工程',
					company: '华润数科',
					department: '软件研发部',
					address: 'New York No. 1 Lake Park',
					date: '2016-10-03'
				}
				let arr=new Array(len);
				for(let i=0;i<arr.length;i++) {
					const obj = Object.assign({},temp);
					obj.age = Math.ceil(Math.random()*100);
					const date = new Date(1667266389067*Math.random());
					obj.date = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
					arr[i] = obj;
				}
				this.data1 = arr;
			},
			renderHeader(h,lebel) {
				return h('div',[
					h('b',{
						style: {
							color: 'red'
						}
					},'*'),
					h('span',lebel),
				]);
			},
			save() {
				this.$refs.tableForm.validate(res => {
					debugger
				})
			}
			
		},
	};
</script>
<style lang="less" scoped>
	.box {
		.page{
			margin: 20px 0;
			text-align: right;
		}
		.footer {
			text-align: center;
		}
	}
</style>
